<template>
  <div class="app-container">
    <div class="chatBox" style="overflow:auto" ref="QAContent">
      <div v-for="(item,index) in msgLogList" :key="index" class="msgBox">
        <div v-if="item.body.typeData.fromType == '11'" class="kehuMsg">
          <div class="handImg mr10 fontSize14">客户</div>
          <!-- 文本 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='0'">
            <div class="border-b-grey pb5"> {{ item.unTranslateTxt }}</div>
            <div class="pt5"> {{ item.translateTxt }}</div>
          </div>
          <!-- 链接 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='1'">
            <el-link :href="item.content" type="primary" :underline="false"> {{ item.content }}</el-link>
          </div>
          <!-- 图片 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='2'">
            <image-preview :src="item.content" :width="item.width" :height="item.height"></image-preview>
          </div>
          <!-- 视频 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='3'">
            <video :src="item.content" controls="controls" type="video/mp4" :width="item.width"
                   :height="item.height"></video>
          </div>
          <!-- 商品 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='4'">
            <el-link :href="item.content" type="" :underline="false">
              <div>
                <el-image :src="item.imageUrl" style="width: 150px; height: 150px"></el-image>
                <!--                  <image-preview :src="item.imageUrl" width="150px"></image-preview>-->
              </div>
              <div class="text-line2 mt10" style="width: 150px">{{ item.title }}</div>
              <div class="fontSizeB mt5">{{ item.promotionPrice }}</div>
            </el-link>
          </div>
          <!-- 订单 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='5'">
            <el-link :href="item.orderDetail.actionUrl" type="" :underline="false">
              <div class="fontSize14">
                <span class="text-muted"> 订单状态：</span>
                <el-tag type="danger"> {{ item.orderDetail.status }}</el-tag>
              </div>
              <div class="text-muted mt5 fontSize14">订单ID：{{ item.orderDetail.orderId }}</div>
              <div class="flexBox mt5">
                <div class="mr10">
                  <el-image :src="item.orderDetail.iconUrl" style="width: 60px; height: 60px"></el-image>
                </div>
                <div class="order-right">
                  <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 400px">
                    {{ item.orderDetail.title }}
                  </div>
                  <div class="">共{{ item.orderDetail.itemCount }}件商品 <span
                    class="fontSizeB">{{ item.orderDetail.content }}</span></div>
                  <div class="text-muted fontSize14">{{ item.orderDetail.gmtCreatedTimeStr }}</div>
                </div>
              </div>
            </el-link>
          </div>
          <!-- 推荐产品 -->
          <div class="mr20 kfTitle" v-if="item.msgType=='6'">
            <el-link :href="item.content" type="" :underline="false">
              <h3>推荐商品</h3>
              <div>
                <el-image :src="item.iconUrl" style="width: 150px; height: 150px"></el-image>
              </div>
              <div class="text-line2 mt10" style="width: 150px">{{ item.title }}</div>
            </el-link>
          </div>
          <div class="text-muted fontSize14">{{ parseTime(item.body.typeData.sendTime) }}</div>
        </div>
        <div v-if="item.body.typeData.fromType == '12'" class="myMsg">
          <div class="handImg ml10">我</div>
          <!--          <div class="myTitle ml10">{{ item.body.typeData.summary }}</div>-->
          <div class="myTitle ml10">
            <!-- 文本 -->
            <div v-if="item.msgType=='0'">
              <div class="border-b-grey pb5"> {{ item.unTranslateTxt }}</div>
              <div class="pt5"> {{ item.translateTxt }}</div>
              <!--              {{ item.unTranslateTxt || item.content }}-->
            </div>
            <!-- 链接 -->
            <div v-if="item.msgType=='1'">
              <el-link :href="item.content" type="primary" :underline="false"> {{ item.content }}</el-link>
            </div>
            <!-- 图片 -->
            <div v-if="item.msgType=='2'">
              <image-preview :src="item.content" :width="item.width" :height="item.height"></image-preview>
            </div>
            <!-- 视频 -->
            <div v-if="item.msgType=='3'">
              <video :src="item.content" controls="controls" type="video/mp4" :width="item.width"
                     :height="item.height"></video>
            </div>
            <!-- 商品 -->
            <div v-if="item.msgType=='4'">
              <el-link :href="item.content" type="" :underline="false">
                <div>
                  <el-image :src="item.imageUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="text-line2 mt10" style="width: 150px">{{ item.title }}</div>
                <div class="fontSizeB mt5">{{ item.promotionPrice }}</div>
              </el-link>
            </div>
            <!-- 订单 -->
            <div class="bg-white" v-if="item.msgType=='5'">
              <el-link :href="item.orderDetail.actionUrl" type="" :underline="false">
                <div class="fontSize14">
                  <span class="text-muted"> 订单状态：</span>
                  <el-tag type="danger"> {{ item.orderDetail.status }}</el-tag>
                </div>
                <div class="text-muted mt5 fontSize14">订单ID：{{ item.orderDetail.orderId }}</div>
                <div class="flexBox mt5">
                  <div class="mr10">
                    <el-image :src="item.orderDetail.iconUrl" style="width: 60px; height: 60px"></el-image>
                  </div>
                  <div class="order-right">
                    <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 400px">
                      {{ item.orderDetail.title }}
                    </div>
                    <div class="">共{{ item.orderDetail.itemCount }}件商品 <span
                      class="fontSizeB">{{ item.orderDetail.content }}</span></div>
                    <div class="text-muted fontSize14">{{ item.orderDetail.gmtCreatedTimeStr }}</div>
                  </div>
                </div>
              </el-link>
            </div>
            <!-- 推荐产品 -->
            <div v-if="item.msgType=='6'">
              <el-link :href="item.content" type="" :underline="false">
                <h3>推荐商品</h3>
                <div>
                  <el-image :src="item.iconUrl" style="width: 150px; height: 150px"></el-image>
                </div>
                <div class="text-line2 mt10" style="width: 150px">{{ item.title }}</div>
              </el-link>
            </div>
            <!-- AI自动回复 -->
            <div v-if="item.msgType=='7'">{{ item.unTranslateTxt || item.content }}</div>
            <!--            <span v-else>{{ item.body.typeData.summary}}</span>-->
          </div>
          <div class="text-muted fontSize14">{{ parseTime(item.body.typeData.sendTime) }}</div>
        </div>
      </div>
    </div>
    <div class="input-card">
      <div>
        <!--        <div class="el-icon-picture-outline width2"></div>-->
      </div>
      <el-input v-model="inputMessage" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }"
                placeholder="请输入您的问题，按Ctrl+Enter组合键换行" @keydown.enter.native="sendMessage($event)">

      </el-input>
      <div class="flex sendBut">
        <el-dropdown>
          <el-button type="primary">
            快捷回复消息<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(item,index) in dict.type.chat_common_phrases" :key="index">
              <div @click="chooseText(item)"> {{ item.label }}</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button class="ml10" @click="sendMessage" type="primary">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {orderSendMsg, queryMessageLogList, sendMsg} from "@/api/autoOperation/python";

export default {
  name: "index",
  dicts: ['chat_common_phrases'],
  data() {
    return {
      socket: "",
      inputMessage: "",//输入框内容
      userId: "",
      uuid_str: "",
      chat: "",
      msgLogList: [],//聊天记录
      sessionId: "",
      cookie_str: ""
    }
  },
  created() {
    this.userId = this.$store.getters.userId
    this.sessionId = this.$route.query.sessionId
    this.cookie_str = this.$route.query.cookie_str
    this.targetId = this.$route.query.targetId
    if (this.$route.query.orderno) {
      this.orderno = this.$route.query.orderno
    }
    this.getMsgLog()
    this.timeTask()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    // 设置滚动条到底部
    scrollToBottom() {
      this.$nextTick(() => {
        let scrollElem = this.$refs.QAContent;
        scrollElem.scrollTo({
          top: scrollElem.scrollHeight,
          behavior: "smooth"
        })
        // this.$refs.mainscroll.scrollTop = this.$refs.content.scrollHeight;
      })
    },
    // 获取聊天记录
    getMsgLog() {
      let data = {
        cookie_str: this.cookie_str,
        sessionId: this.sessionId,
        // cookie_str: 'ali_apache_id=33.8.71.47.1700632090424.886830.8; _gcl_au=1.1.1040922642.1700632095; _ym_uid=1700632097384053663; _ym_d=1700632097; account_v=1; _hvn_login=13; _fbp=fb.1.1701322249259.426829522; e_id=pt30; aep_common_f=I363L4dJXx8bSxl+okgWJbg7XnqoyXsJ0KHztNgVsnbxwbgCgmGYfw==; aeu_cid=52f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6; x_router_us_f=x_alimid=2674993116; aep_history=keywords%5E%0Akeywords%09%0A%0Aproduct_selloffer%5E%0Aproduct_selloffer%091005005967889207%091005006001198555%091005006011897852%091005005892114558%091005005865422085%0932827868245%091005002990244740%0932845497995; cna=8KgeHm6bxHoCAXjgdy5NzQnb; xlly_s=1; _lang=zh_CN; l=fB_xbMDHPuYjQxWJBO5IKurza7796BdbcPVzaNbMiIEGa6M5qI205NCOpcOXndtjgTfVhe-rWDM-1dE6JXaLRjkDBeYI4OGGBRJ9-iRLS45..; cto_bundle=NDv32V91WlFZN1dJJTJGcUZsQjlZWjIzVGI3aExlR2hLeFlsWGhiWGtLSFVBQVhuN1lzN3NpVXVEQWdRdkE5RUNuQXNMSHdZYTVLVTBTWFB6ZjhoSDRoUVpDWDkxdkdQRHM5dm0zNGNpOWxVaks4JTJCWnFpYXZmd3JhZlU1OXp4ejZ3RzFzY01IRjdJdVl2b1dEJTJCdkJVZmEwdkZ6NnclM0QlM0Q; lzd_cid=b8f9769f-4cc1-430d-b5f0-32f762cbf515; lazop_lang=zh_CN; intl_locale=en_US; gmp_sid=2674993116; _m_h5_tk=c2dc5a97f7cc69d554e91ddb6d848402_1704954360055; _m_h5_tk_enc=182513fd00d295204f4f3a8186649203; intl_common_forever=3DwTU9wMQfzgvcJqukCl8QABYYXebRkCXn9GSXb4ewnRKa4LIEHHaw==; _gid=GA1.2.1573481459.1704952490; _ga_VED1YSGNC7=GS1.1.1704952491.28.0.1704952491.60.0.0; _ga=GA1.1.151884950.1700632095; ali_apache_track=mt=2|mid=cn1075970114vjnae; ali_apache_tracktmp=; acs_usuc_t=acs_rt=ebe103d704284fd09f53f09480021993&x_csrf=bayrdvpujbrn; havana_tgc=NTGC_1c26353408914f557f5014ad81652c0c; xman_us_t=x_lid=cn1075970114vjnae&sign=y&rmb_pp=86-19531943413&x_user=FcKss4OAi86W4eE0b45A51+vgsUK9Yk/ihq1bPDGSa4=&ctoken=1ausaprre07bp&l_source=aliexpress; aep_usuc_f=site=glo&region=CN&b_locale=en_US&iss=y&s_locale=zh_CN&isfm=y&c_tp=USD&x_alimid=2674993116; sgcookie=E100vNyqX1nqBq67FqYhx/6g058eNU2vH2QKr+QRniJSDc1syUjbF79nenZZGTgt6qORU1fEoOWddOBGAyP5ZAFNqnx2Cq/mNsKwwecjmK9+7YU=; xman_t=4O85hYXofxTEsUx/aWWODgU79d5FGlrBddxGvR91O2Uglbj0MpXHxWGWhFIxWbqOALiUT3zVQPEUptbaHGznikacng0vfkRWO0Aupu33eDRlGivMsPwMts0+h+Akx/W2iL3Q0F/5cm5OgV5SBKmUIV6OuFqgkdmBswN7h4uRU8pNo0+O3M2+uCpq+WmZ9Y4jKjjybhRN38gezIuZBR2aeDYX6JvgImsrcg7H0Z0ldlcwmt0JCFp8ZfFmJKNbiNxNFogC5gJG/+Rwnn8pOZp4vzSvslaFOdhZYbuzk4KwQ/du/m7niIZWPQdxK0ZZ8r6b3oQnZ58Wt8VAS1FYC00r9P3Ga1OJmDw5vkKLDpn4B6VE3jjAO8BznaO90cpZWRukCrtmeUFkdlMLIud8LbmAbEXu3ewWfLKADzZuhUBZ9DyAf9PSvp9hASz8fePPhodLMbLIMvfoORLNUi9JW2vWCzPE+Vb38wpuC3Lo8v/biC5M42lPsUX57NM2Trj2TwkiKED2woVOR0FOn1kqK5xn5CJFmFM2oyPK1h1E4Vrpp6/gZG72ZODp/xHJU9O1S+vKj644n8l50zCz87BYCsfbzfhUoypPJRtPlzZy59Xn4sGNWTdfZFjw6wiRWXC1ydE8c9nkEKO2ucYg5J4d784LWLPLeenfposM4GddR+u11gizeCPach7r3VoLk+Uh2io453OaUO4FR+rI4UiHdFf2kxwwXSh8IEiaJWYp4l1O51cAHJP9sLLzWUlWguwFvhLIXZrDMXSaXcvx799sizbuDbcV92h8oEbMIiscLHxhUEptOgHE73zMIT1i5xnmch4f; xman_f=Zu/gpEqjkUt3de76XZo+ljyQ0+7j058iQHsWCI7kujAj+wF7ZF2f1QdNZD1URe6nh/9i3PHTrjkX8f106IGaQBXBjtCpiEGBupdZh1haOtsEe04wc76AC9t2uFs4QH48/U2sop1Dy51L/VVZSvzH1nD6kQ53YCETznWVQzJx61gX14IVcfA6gm8OBJ58tmKJfIxIG+Tnn4j7yDrjFBteq+zl8d/xUOQgw3bBgtsyDLpjPSIiVQLm2zzlgyWSXFAYlh/b749AiG9rBWWJ+1GFJTRfD6bUaGccG+2QMD+WzqWhFghrGwQktObqlAAYLXAS42GQga8ZvC/CqgpHyKqthT20v5We7ycIbgfzqc6NsOIV4k5+rGpC3oWQP3TxGTufuagN0v4m/1v1EBBpi49B1mWy3sK/uEBZ+ARlalIrFM/togRcKWxXqL5whU8yLLUZg5QsuAIi3wXn+uc1xbE97XfOTmXdrqEO; xman_us_f=zero_order=y&x_locale=en_US&x_l=0&x_user=CN|default%20firstName|default%20lastName|cnfm|2674993116&x_lid=cn1075970114vjnae&x_c_chg=0&x_as_i=%7B%22aeuCID%22%3A%2252f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6%22%2C%22affiliateKey%22%3A%22cX37Vqz6%22%2C%22channel%22%3A%22AFFILIATE%22%2C%22cv%22%3A%221%22%2C%22isCookieCache%22%3A%22N%22%2C%22ms%22%3A%220%22%2C%22pid%22%3A%22143472817%22%2C%22tagtime%22%3A1702542900630%7D&acs_rt=ceeddf0591f74dd49e0f0c3daba86ea2; isg=BDk59yM9eLcO3yThXQD7pxQKSKUTRi34Ui9Saltv-mDf4l10o5ZuyEhzZOYU38Uw; tfstk=enoMbYxYHVz1ylsSpfE6ATNwNcTL-1ZbajIYMoF28WPIXGEx3ovm6bfYMrp_gSPnG5UTbFMq3xPIM5H9COgIwYStXFZAmlZb0QdJ23BsCoZ4njE1TAGGbRdkw3K-QXFg2POJCHxfYM-WXKodfD9gy7XPW6ZQX_P_aAPZBAnFeP_sLWf11D0aS7-0tiSqxRjPzw7P8OIbLKnFlZaadJVRQ6bPj5wUuB9HKaT_7Jw9wpvhlZaadJVJKpb5GPyQBQC..',
        // sessionId: '2#103#2674993116#12#2947280029#11'
      }
      queryMessageLogList(data).then(res => {
        // console.log('res', res.data.data.result)
        let list = res.data.data.result
        list.sort((a, b) => {
          let dateA = new Date(a.body.typeData.sendTime)
          let dateB = new Date(b.body.typeData.sendTime)
          return dateA - dateB
        })
        console.log('list', list)
        // msgType:0 文本，1 链接，2 图片，3 视频,4 产品详情
        list.forEach((item, index) => {
          let summary = item.body.typeData.summary;
          let templateData = JSON.parse(item.body.templateData);
          console.log('templateData', templateData)
          if (templateData.videoUrl) {
            item.msgType = '3'// 视频
            item.width = templateData.width * 0.5 > 500 ? 480 : ''
            item.height = templateData.height * 0.5
            item.content = templateData.videoUrl
          } else if (templateData.imgUrl) {
            item.msgType = '2' // 图片
            item.width = templateData.width * 0.5 > 500 ? templateData.width * 0.1 : templateData.width * 0.5
            item.height = templateData.width * 0.5 > 500 ? templateData.height * 0.1 : item.height = templateData.height * 0.5
            item.content = templateData.imgUrl
          } else if (templateData.orderId) {
            item.msgType = '5' // 订单详情
            item.orderDetail = templateData
          } else if (templateData.promotionPrice) {
            item.msgType = '4' // 产品详情
            item.promotionPrice = templateData.promotionPrice
            item.title = templateData.title
            item.imageUrl = templateData.imageUrl
            item.content = templateData.actionUrl
          } else if (templateData.iconUrl && templateData.imageUrl) {
            item.msgType = '6'//推荐产品
            item.iconUrl = templateData.iconUrl
            item.title = templateData.title
            item.content = templateData.actionUrl
          } else if (templateData.promptForSeller) {
            item.msgType = '7'
            item.content = templateData.promptForSeller
          } else {
            let txt = templateData.translateTxt || templateData.txt
            if (txt.indexOf('https://') != -1 || txt.indexOf('http://') != -1) {
              item.msgType = '1' // 链接
            } else {
              item.msgType = '0' // 文本
            }
            item.content = txt // 客户消息优先使用翻译语言
            item.unTranslateTxt = templateData.txt  // 客服消息优先显示原语言
            item.translateTxt = templateData.translateTxt
          }
        })
        this.msgLogList = list
        console.log('list', list)
        this.scrollToBottom()
      })
    },
    // 定时任务
    timeTask() {
      this.timer = setInterval(() => {
        // console.log('定时任务')
        // this.getMsgLog()
      }, 2000)
      this.$once('hook:beforeDestory', () => {
        clearInterval(this.timer)
      })
    },
    // 选择快捷回复语
    chooseText(item) {
      console.log('@@', item)
      this.inputMessage = item.label
    },
    // 发送消息
    sendMessage(event) {
      console.log('event', event)
      if (!event.ctrlKey) { // 如果没有按下组合键ctrl，则会阻止默认事件
        event.preventDefault();
        let data = {
          cookie_str: this.cookie_str,
          sessionId: this.sessionId,
          // cookie_str: 'ali_apache_id=33.8.71.47.1700632090424.886830.8; _gcl_au=1.1.1040922642.1700632095; _ym_uid=1700632097384053663; _ym_d=1700632097; account_v=1; _hvn_login=13; _fbp=fb.1.1701322249259.426829522; e_id=pt30; aep_common_f=I363L4dJXx8bSxl+okgWJbg7XnqoyXsJ0KHztNgVsnbxwbgCgmGYfw==; aeu_cid=52f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6; x_router_us_f=x_alimid=2674993116; aep_history=keywords%5E%0Akeywords%09%0A%0Aproduct_selloffer%5E%0Aproduct_selloffer%091005005967889207%091005006001198555%091005006011897852%091005005892114558%091005005865422085%0932827868245%091005002990244740%0932845497995; cna=8KgeHm6bxHoCAXjgdy5NzQnb; xlly_s=1; _lang=zh_CN; l=fB_xbMDHPuYjQxWJBO5IKurza7796BdbcPVzaNbMiIEGa6M5qI205NCOpcOXndtjgTfVhe-rWDM-1dE6JXaLRjkDBeYI4OGGBRJ9-iRLS45..; cto_bundle=NDv32V91WlFZN1dJJTJGcUZsQjlZWjIzVGI3aExlR2hLeFlsWGhiWGtLSFVBQVhuN1lzN3NpVXVEQWdRdkE5RUNuQXNMSHdZYTVLVTBTWFB6ZjhoSDRoUVpDWDkxdkdQRHM5dm0zNGNpOWxVaks4JTJCWnFpYXZmd3JhZlU1OXp4ejZ3RzFzY01IRjdJdVl2b1dEJTJCdkJVZmEwdkZ6NnclM0QlM0Q; lzd_cid=b8f9769f-4cc1-430d-b5f0-32f762cbf515; lazop_lang=zh_CN; intl_locale=en_US; gmp_sid=2674993116; _m_h5_tk=c2dc5a97f7cc69d554e91ddb6d848402_1704954360055; _m_h5_tk_enc=182513fd00d295204f4f3a8186649203; intl_common_forever=3DwTU9wMQfzgvcJqukCl8QABYYXebRkCXn9GSXb4ewnRKa4LIEHHaw==; _gid=GA1.2.1573481459.1704952490; _ga_VED1YSGNC7=GS1.1.1704952491.28.0.1704952491.60.0.0; _ga=GA1.1.151884950.1700632095; ali_apache_track=mt=2|mid=cn1075970114vjnae; ali_apache_tracktmp=; acs_usuc_t=acs_rt=ebe103d704284fd09f53f09480021993&x_csrf=bayrdvpujbrn; havana_tgc=NTGC_1c26353408914f557f5014ad81652c0c; xman_us_t=x_lid=cn1075970114vjnae&sign=y&rmb_pp=86-19531943413&x_user=FcKss4OAi86W4eE0b45A51+vgsUK9Yk/ihq1bPDGSa4=&ctoken=1ausaprre07bp&l_source=aliexpress; aep_usuc_f=site=glo&region=CN&b_locale=en_US&iss=y&s_locale=zh_CN&isfm=y&c_tp=USD&x_alimid=2674993116; sgcookie=E100vNyqX1nqBq67FqYhx/6g058eNU2vH2QKr+QRniJSDc1syUjbF79nenZZGTgt6qORU1fEoOWddOBGAyP5ZAFNqnx2Cq/mNsKwwecjmK9+7YU=; xman_t=4O85hYXofxTEsUx/aWWODgU79d5FGlrBddxGvR91O2Uglbj0MpXHxWGWhFIxWbqOALiUT3zVQPEUptbaHGznikacng0vfkRWO0Aupu33eDRlGivMsPwMts0+h+Akx/W2iL3Q0F/5cm5OgV5SBKmUIV6OuFqgkdmBswN7h4uRU8pNo0+O3M2+uCpq+WmZ9Y4jKjjybhRN38gezIuZBR2aeDYX6JvgImsrcg7H0Z0ldlcwmt0JCFp8ZfFmJKNbiNxNFogC5gJG/+Rwnn8pOZp4vzSvslaFOdhZYbuzk4KwQ/du/m7niIZWPQdxK0ZZ8r6b3oQnZ58Wt8VAS1FYC00r9P3Ga1OJmDw5vkKLDpn4B6VE3jjAO8BznaO90cpZWRukCrtmeUFkdlMLIud8LbmAbEXu3ewWfLKADzZuhUBZ9DyAf9PSvp9hASz8fePPhodLMbLIMvfoORLNUi9JW2vWCzPE+Vb38wpuC3Lo8v/biC5M42lPsUX57NM2Trj2TwkiKED2woVOR0FOn1kqK5xn5CJFmFM2oyPK1h1E4Vrpp6/gZG72ZODp/xHJU9O1S+vKj644n8l50zCz87BYCsfbzfhUoypPJRtPlzZy59Xn4sGNWTdfZFjw6wiRWXC1ydE8c9nkEKO2ucYg5J4d784LWLPLeenfposM4GddR+u11gizeCPach7r3VoLk+Uh2io453OaUO4FR+rI4UiHdFf2kxwwXSh8IEiaJWYp4l1O51cAHJP9sLLzWUlWguwFvhLIXZrDMXSaXcvx799sizbuDbcV92h8oEbMIiscLHxhUEptOgHE73zMIT1i5xnmch4f; xman_f=Zu/gpEqjkUt3de76XZo+ljyQ0+7j058iQHsWCI7kujAj+wF7ZF2f1QdNZD1URe6nh/9i3PHTrjkX8f106IGaQBXBjtCpiEGBupdZh1haOtsEe04wc76AC9t2uFs4QH48/U2sop1Dy51L/VVZSvzH1nD6kQ53YCETznWVQzJx61gX14IVcfA6gm8OBJ58tmKJfIxIG+Tnn4j7yDrjFBteq+zl8d/xUOQgw3bBgtsyDLpjPSIiVQLm2zzlgyWSXFAYlh/b749AiG9rBWWJ+1GFJTRfD6bUaGccG+2QMD+WzqWhFghrGwQktObqlAAYLXAS42GQga8ZvC/CqgpHyKqthT20v5We7ycIbgfzqc6NsOIV4k5+rGpC3oWQP3TxGTufuagN0v4m/1v1EBBpi49B1mWy3sK/uEBZ+ARlalIrFM/togRcKWxXqL5whU8yLLUZg5QsuAIi3wXn+uc1xbE97XfOTmXdrqEO; xman_us_f=zero_order=y&x_locale=en_US&x_l=0&x_user=CN|default%20firstName|default%20lastName|cnfm|2674993116&x_lid=cn1075970114vjnae&x_c_chg=0&x_as_i=%7B%22aeuCID%22%3A%2252f5c35ec59b4852bb315adba5cc2bbb-1702542900630-03908-cX37Vqz6%22%2C%22affiliateKey%22%3A%22cX37Vqz6%22%2C%22channel%22%3A%22AFFILIATE%22%2C%22cv%22%3A%221%22%2C%22isCookieCache%22%3A%22N%22%2C%22ms%22%3A%220%22%2C%22pid%22%3A%22143472817%22%2C%22tagtime%22%3A1702542900630%7D&acs_rt=ceeddf0591f74dd49e0f0c3daba86ea2; isg=BDk59yM9eLcO3yThXQD7pxQKSKUTRi34Ui9Saltv-mDf4l10o5ZuyEhzZOYU38Uw; tfstk=enoMbYxYHVz1ylsSpfE6ATNwNcTL-1ZbajIYMoF28WPIXGEx3ovm6bfYMrp_gSPnG5UTbFMq3xPIM5H9COgIwYStXFZAmlZb0QdJ23BsCoZ4njE1TAGGbRdkw3K-QXFg2POJCHxfYM-WXKodfD9gy7XPW6ZQX_P_aAPZBAnFeP_sLWf11D0aS7-0tiSqxRjPzw7P8OIbLKnFlZaadJVRQ6bPj5wUuB9HKaT_7Jw9wpvhlZaadJVJKpb5GPyQBQC..',
          // sessionId: '2#103#2674993116#12#2947280029#11',
          content: this.inputMessage,
          en: "en",
          targetId: this.targetId,
        }
        // 从订单页面进入
        if (this.orderno) {
          orderSendMsg(data).then(res => {

          })
        } else {
          sendMsg(data).then(res => {
            this.getMsgLog()
            this.inputMessage = ""
          })
        }

      } else {
        // 如果同时按下ctrl+回车键，则会换行
        this.inputMessage += '\n';
      }
    },
  }
}
</script>

<style scoped>
.chatBox {
  width: 70%;
  min-width: 900px;
  height: 650px;
  border: 1px solid #0986e3;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  background-color: #efefef;
}

.input-card {
  width: 70%;
  min-width: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.msgBox {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

.kfTitle, .myTitle {
  padding: 10px;
  border-radius: 6px;
  max-width: 500px;
  position: relative;
  word-wrap: break-word;
  word-break: break-all;
}

.kfTitle {
  background-color: #ffffff;
}

.myTitle {
  background-color: #94eb69;
}

.myMsg, .kehuMsg {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  margin-bottom: 10px;
}

.myMsg {
  flex-direction: row-reverse;
}

.kfTitle:before {
  content: "";
  position: absolute;
  left: -4px;
  top: 15px;
  transform: rotate(45deg);
  border: 4px solid #FFF;
}

.myTitle:after {
  content: "";
  position: absolute;
  right: -4px;
  top: 15px;
  transform: rotate(45deg);
  border: 4px solid #94eb69;
}

.handImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid;
  text-align: center;
  line-height: 40px;
  background-color: #00afff;
  color: #fff;
}

.sendBut {
  width: 100%;
  justify-content: flex-end;
  margin-top: 10px;
}

.order-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/**改变input里的字体颜色*/
/deep/ input::-webkit-input-placeholder {
  color: #00bcff;
  font-size: 12px;
}

/**改变input框背景颜色*/
/deep/ .el-input__inner {
  background-color: transparent !important;
}
</style>
